<template>
  <div id="header" class="container">
    <div class="row">
        <div id="logo" class="col-md-3">
          <a href="#">
            <img src="../assets/Logo1.png" alt="">
          </a>
        </div>
        <div id="coolMenus" class="col-md-7">
          <nav>
              <ul class="nav">
                  <li v-for="(item, index) in navData" :key="index" @click="GotoGame(item.name)">
                      {{item.title}}
                  </li>
              </ul>
          </nav>
        </div>
        <div class="col-md-2">
            <div class="login" v-show="!user">
                <el-button round @click="login">登录</el-button>
                <el-button type="danger" @click="register"  round>注册</el-button>
            </div>
            <div class="userinfo" v-show="user">
                <el-avatar icon="el-icon-user-solid"></el-avatar>
                <div>{{user_name}}</div> |
                <div class="exit" @click="exit">退出</div>
            </div>
        </div>
    </div>
    <el-dialog
        :title="operateType==='login'?'用户登录':'用户注册'"
        :visible.sync="centerDialogVisible"
        width="20%"
        top='20vh'
        center>
        <CommonLogin @hidden='Change'/>
        
    </el-dialog>
  </div>
</template>

<script>
import CommonLogin from './CommonLogin.vue'
export default {
    components:{CommonLogin},
    data() {
        return {
            navData:[
                {
                    title:'首页',
                    name:'home'
                },
                {
                    title:'数据',
                    name:'Data'
                },
                {
                    title:'数据分析',
                    name:'ALG'
                },
                {
                    title:'数据可视化',
                    name:'Visual'
                }
            ],
            centerDialogVisible: false,
            user_name:'',
            user:false
        }
    },
    computed:{
        operateType() {
            return this.$store.state.operateType
        }
    },
    methods: {
        login(){
            this.$store.commit('Cut','login')
            this.centerDialogVisible = true
        },
        register(){
            this.$store.commit('Cut','register')
            this.centerDialogVisible = true
        },
        GotoGame(data){
            this.$router.push({
                name:data
            })
        },
        Change(value){
            this.centerDialogVisible=!this.centerDialogVisible
            this.user_name=value
            this.user=true
        },
        exit(){
            this.$router.go(0);
            this.$router.push({
                name:'home'
            })
            localStorage.clear()
        }
    },
    mounted() {
        
    },
}
</script>

<style lang='scss' scoped>
#header{
    height: 90px;
    #logo{
        a{
            img{
                width: 240px;
                height: 60px;
            }
        }
    }
    #coolMenus{
        nav{
            .nav{
                display: flex;
                justify-content: space-between;
                margin-bottom: 0;
                li{
                    list-style: none;
                    cursor: pointer;
                    height: 90px;
                    font-size: 16px;
                    line-height: 90px;
                    // padding: 0 20px;
                    &:after{
                        content: ' ';
                        position: absolute;
                        z-index: 2;
                        bottom: 0;
                        left: 50%;
                        display: block;
                        width: 90px;
                        height: 1px;
                        transform: translate(-50%);
                    }
                    &:hover:after{
                        height: 2px;
                        animation: ad_width .3s linear forwards;
                        background: #ff8a00;
                    }
                    @keyframes ad_width {
                        from {
                             width: 0
                        }
                        to {
                            width: 90px
                        }
                    }
                }

            }
        }
    }
    .userinfo{
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: rgb(110, 110, 110);
        .exit{
            cursor: pointer;
        }
    }
    .el-dialog__body{
        padding-top: 0;
    }
}
</style>